<template>
  <view class="category">
    <!-- 搜索框 -->
    <search></search>
    <!-- 分类布局 -->
    <view class="content">
      <view class="left">
        <view
          :class="contentIndex === index ? 'title-item active' : 'title-item'"
          @click="handlerMenuSelect(index)"
          v-for="(item, index) in titles"
          :key="item"
        >
          {{ item }}
        </view>
      </view>
      <view class="right">
        <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
          <view class="goods-title">/ {{ item1.cat_name }} /</view>
          <view class="goods-list">
            <navigator v-for="item2 in item1.children" :key="item2.cat_id">
              <image :src="item2.cat_icon" mode="widthFix"> </image>
              <view class="goods-subtitle">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let categories = [];
export default {
  data() {
    return {
      // 左侧的标题数组
      titles: [],
      // 右侧的商品数组
      goods: [],
      // 选中的左边标题
      contentIndex: 0,
    };
  },
  async onLoad() {
    // 正常发送请求方式
    const res = await this.$u.get("/categories");
    categories = res.message;
    // console.log(17, categories);
    this.titles = categories.map((v) => v.cat_name);
    this.goods = categories[0].children;
    console.log(38, this.goods);
  },
  methods: {
    handlerMenuSelect(index) {
      this.contentIndex = index;
      this.goods = categories[index].children;
    },
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: hidden;
  display: flex;
  .left {
    padding-top: 30rpx;
    margin-left: 20rpx;
    width: 180rpx;
    overflow: auto;
    .title-item {
      height: 80rpx;
      font-size: 28rpx;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: #ea4350;
      position: relative;
      &::before {
        content: "";
        width: 5rpx;
        height: 80%;
        background-color: #ea4350;
        left: -3rpx;
        top: 20%;
        transform: translateY(-50%);
        position: absolute;
      }
    }
  }
  .right {
    flex: 1;
    overflow: auto;
    .goods-group {
      .goods-title {
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
      }
      .goods-list {
        display: flex;
        flex-wrap: wrap;
        // navigator是超链接便签，，，不用点。。。。。
        navigator {
          width: 33.33%;
          text-align: center;
          image {
            width: 60%;
          }
          .goods-subtitle {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>